
<template>
    <div>
        <button @click="handleClick()">click</button>
        <!-- 设置ref进行DOM节点操作 传值  -->
        <input ref="myinput">
        <div ref="test">test</div>

        <Child ref="mychild"></Child>

        <Filed label="账号" type="text"></Filed>
        <Filed label="密码" type="password"></Filed>
    </div>
</template>

<script>
import Child from './child.vue';
import Filed from './Filed.vue';

export default {
    components: {
        Child,
        Filed
    },
    data() {
        return {};
    },
    methods: {
        handleClick() {
            if (this.$refs.mychild) {
                console.log(this.$refs.mychild.childTitle); // 直接通过$refs获取子组件的属性
                this.$refs.mychild.childTitle = '父组件改变子组件的属性';
            }

            this.$refs.test.style.background = 'red';
        }
    }
};
</script>

<style>
/* 你可以在这里添加样式 */
</style>